<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>我的OKR</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.css">
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link rel="stylesheet" href="../css/icons-extra.css">
<link rel="stylesheet" type="text/css" href="../js/page/jquery-pages.css"/>
<link rel="stylesheet" type="text/css" href="../css/public2.css" />
<link rel="stylesheet" href="../css/iconfont.css" />

</head>
<style>
#findtable{
width:96%;
}
#findtable td{

}
#findtable tr{
	border-bottom:solid thin #c8c7cc;
	height:25px;
}
#findtable2{
width:96%;
}

#findtable2 td{

}
#findtable2 tr{
	border-bottom:solid thin #c8c7cc;
	height:25px;
}
</style>

<body>

<div style="display: none;">
	<%=System.currentTimeMillis()%>
	<img src="../img/logo.jpg">
</div>

<div id="search" class="mui-popover" style="position:fixed;">
<!-- 查询弹出层 -->
<form class="mui-input-group" id="findpage"
	style="padding-left: 20px; padding-right: 20px; padding-top: 30px; padding-bottom: 10px;">
	<table id="findtable" width="100%">
		<tr>
			<td width="20.5%">年度：</td>
			<td width="28%">
				<select id="year1">
					<option value="请选择">请选择</option>
					<c:forEach items="${sessionScope.years }" var="item">
					<option value="${item }">${item }</option>
					</c:forEach>
				</select> 
			</td>
		<td width="3%">&nbsp;</td>
		<td width="20.5%">季度：</td>
		<td width="28%">
			<select id="quarter1">
				<option value="Q0">请选择</option>
				<option value="Q0">全选</option>
				<option value="Q1">一季度</option>
				<option value="Q2">二季度</option>
				<option value="Q3">三季度</option>
				<option value="Q4">四季度</option>
			</select>
		</td>
		</tr>
		<tr>
			<td >月度：</td>
			<td >
			<select id="month1">
				<option value="0">请选择</option>
				<option value="0">全选</option>
				<option value="1">1月</option>
				<option value="2">2月</option>
				<option value="3">3月</option>
				<option value="4">4月</option>
				<option value="5">5月</option>
				<option value="6">6月</option>
				<option value="7">7月</option>
				<option value="8">8月</option>
				<option value="9">9月</option>
				<option value="10">10月</option>
				<option value="11">11月</option>
				<option value="12">12月</option>
			</select> 
			
			</td>
			<td >&nbsp;</td>
			<td >状态：</td>
			<td >
				<select id="state1">
					<option value="0"selected = "selected">请选择</option>
					<c:forEach items="${sessionScope.oState }" var="item" varStatus="status">
						<option value="${item.CODE_NO}">${item.CODE_NAME}</option>
					</c:forEach>
				</select>
			</td>
		</tr>
		</table>
		<table id="findtable2" width="100%">
		<!-- <tr>
			<td width="38%">O的定义：</td>
			<td width="62%" >
				<input type="text" id="odefinition1" style="border: solid thin #eee;margin-bottom: 5px;" class="mui-input-clear" placeholder="">
			</td>
		</tr> -->
		<div style="height: 50px;" class="mui-input-row">
			<label style="width: 40%; margin-top: 5px; padding-left: 1%;">O的定义：</label>
			<input type="text"
				style="width: 55%;height: 35px; border: solid thin #eee;"
				class="mui-input-clear" placeholder="" id="odefinition1" >
		</div>
		</table>
		
		<div class="mui-button-row">
			<button type="button" id="btn_search" class="mui-btn mui-btn-primary"
			onclick="pageList(true,1);">查询</button>
		</div>
	</form>
</div>
<!--查询弹出层-->

<!--组织列表弹出层-->
<div id="orglayer" class="">
	<div style="position:relative;left:100%;width:20%">
        <img id="closebtn" style="margin-top:2%;box-shadow:0 0 20px #ccc;" src="../img/x.png">
	</div>
	<div class="menuTree">
		<div><span>中软国际</span></div>
	</div>
	<div id="" class="" style="overflow: scroll;position: relative;height:93%;">
	    <div class="mui-scroll" style="margin-bottom: 15%;">
			<div id="menuTree" class="menuTree"></div>
	    </div>
	</div>
</div>
<!--组织列表弹出层-->


<header class="mui-bar mui-bar-nav">
	<a id="orgbtn" class="mui-icon mui-icon-contact mui-pull-left"
		style="line-height: 26px; font-size: 20px; color: #007aff;"><span
		style="font-size: 17px; color: #007aff;">组织</span></a>
	<h1 class="mui-title">我的OKR列表</h1>
	<a href="#search" class="mui-icon mui-icon-search mui-pull-right"
		style="line-height: 26px; font-size: 20px; color: #007aff;"><span
		style="font-size: 17px; color: #007aff;">查询</span></a>
</header>

<div class="mui-content">
	<!-- 加载列表 -->
	<div id="list"></div>
	<div style="height: 10px;">&nbsp;</div>
	<div class="mui-content-padded" id="page"></div>
	<div style="height: 10px;">&nbsp;</div><hr>
	<center><p>&copy;2016~2017 中软国际信息技术有限公司</p></center>
	<div style="height: 30px;">&nbsp;</div>
</div>

	<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="../js/page/jquery-pages.js"></script>
	<script src="../js/tree.js"></script>
	<script>
		var orglayer = document.getElementById("orglayer");
		var orgbtn = document.getElementById("orgbtn");
		var closebtn = document.getElementById("closebtn");
		orgbtn.onclick = function() {
			orglayer.className = "rhua";
		}
	
		closebtn.onclick = function() {
			orglayer.className = "lhua";
		}
	
		var emplCode = "${requestScope.emplCode}";
		var orgCode = "${requestScope.orgCode}";
		var param = "${requestScope.param}";
		
		var tree_url = "tree?emplCode="+emplCode+"&orgCode=";
		tree(${sessionScope.tree});
		
		function splitStr(str){
			var strs = new Array(); //定义一数组 
			strs =str.split(",");
			return strs;
		}
		//O评分颜色
		function oColor(value){
			
			var color = '#4E4848';

			if (value == null) {
				return '<font></font>';
			}

			if (value == 0) {
				color = '#4E4848'; // 默认灰色
			}
			
			<c:forEach items="${sessionScope.oColor }" var="item" varStatus="status">
			
		 	var strs = splitStr("${item.LIMITSWITCH_EXPRESSION}");
		 	
			if(value >= strs[0] && value <= strs[1]){
				color = '${item.LIMITSWITCH_VALUE}';
			}
			
			</c:forEach>
			
			return '<font color="' + color + '">' + value + '</font>';
		}
		
		//kr颜色
		function krColor(value){
			
			var color = '#4E4848';

			if (value == null) {
				return '<font></font>';
			}

			if (value == 0) {
				color = '#4E4848'; // 默认灰色
			}
			
			<c:forEach items="${sessionScope.krColor }" var="item" varStatus="status">
			
		 	var strs = splitStr("${item.LIMITSWITCH_EXPRESSION}");
		 	
			if(value >= strs[0] && value <= strs[1]){
				color = '${item.LIMITSWITCH_VALUE}';
			}
			
			</c:forEach>
			
			return '<font color="' + color + '">' + value + '</font>';
		}
		//状态
		function oState(value){
			
			<c:forEach items="${sessionScope.oState }" var="item" varStatus="status">
			
			if(value == "${item.CODE_NO}"){
				return '${item.CODE_NAME}';
			}
			
			</c:forEach>
			return "";
		}
		//OKR类别
		function oTeam(value){
			
			<c:forEach items="${sessionScope.oTeam }" var="item" varStatus="status">
			
			if(value == "${item.CODE_NO}"){
				return '${item.CODE_NAME}';
			}
			</c:forEach>
			return "";
		}
		
	</script>
	<script src="../js/mui.js"></script>
	<script src="../js/comm.js?<%=System.currentTimeMillis()%>.js"></script>
	<script src="../views-js/self/self_okr.js?<%=System.currentTimeMillis()%>.js"></script>

</body>

</html>